Nybörjarkurs i programmering, hemsidor och appar

Detta är en guide för dig som aldrig har hållit på med programmering.

Målet med denna guide är att du praktiskt ska "komma igång" med att skapa hemsidor och appar.

Denna kurs kommer förhoppningsvis fyllas på allt eftersom ...

Vad behövs?

Du kommer att behöva installera massor med program på datorn, men till att börja med behöver du en webbläsare samt internet-uppkoppling.

Du behöver inga förkunskaper, men jag tar för givet att du har viss dator-vana. Det vill säga, du kan editera text, söka efter information på nätet, och installera program på datorn.

Installera Opera (webbläsasre)

Gå till Operas hemsida och ladda ner installations-programmet för webbläsaren Opera. Starta sedan installations-programmet.

Det går så klart att använda vilken webbläsare som helst, men jag kommer anta att du använder Opera. Fördelen med Opera är att den kör samma JavaScript motor som NodeJS.

Installera NodeJS

Gå till hemsidan för NodeJS och ladda ner installations-programmet, och installera det.

Anledningen till att vi börjar med NodeJS (JavaScript) är att det är samma programmering-språk (javaScript) som används på hemsidor/webben.
Och det har samma tillväga-gångs-sätt som andra programmerings-språk! Om du vet hur man gör med NodeJS, kan du lätt komma igång med andra språk så som Python

Hitta kommando-promten

Du sitter troligtvis just nu med ett grafiskt användargränssnitt (GUI), vilket är lätt att använda, men mycket begränsande om man vill kunna använda en dator fullt ut. Vi ska därför gå in i kommando-gränssnittet (CLI). Detta kallas kommando-promten, konsolen, eller terminalen.

Windows: Start > (Kör) > skriv cmd > tryck Enter

Mac: /Program/Tillbehör/ > Terminal

Linux:Tryck Ctrl+F1 och logga in med ditt använarnamn/lösenord, eller använd terminal-programmet.

Börja med att skriva kommandot echo med argumentet hej, alltså: echo hej. Och tryck på Enter.
Då kommer text-strängen "hej" visas på nästa rad!

Skriv sedan kommandot cd och tryck på Enter. Då visas den aktuella katalogen/mappen.

Att skriva kommandon i kommando-tolken är ungefär som att programmera!

Skriv nu node med argumentet -v, alltså: node -v. Om du har installerat nodeJS bör nu nodeJS's version visas. I skrivandets stund är det v4.2.1.

Du borde nu se något liknande detta (om du kör Windows):

Skapa ett (enkelt) program

Öppna valfri text-editor ... En text-edtior är ett program som man skriver text i. Om du har windows går det bra med nodepad, men du kommer efter ett tag tycka det är lite för enkelt, och kommer vilja ha ett program mer anpassat för programmering. Till exempel Nodepad++ eller sublime text.

Skriv in följande kod och spara filen som "hej.js"

console.log("hej");

Öppna sedan kommando-tolken. Navigera till mappen där du sparaden filen (skriv cd /sökväg/till/filen). Och skriv kommandot node med argumentet hej.js. Då körs koden/instruktionerna i hej.js och text-strängen "hej" visas. Alltså samma sak som när vi skriv echo hej i kommando-tolken.

Skapa ett (server) program

Ett server-program är ett program som servar/pratar med ett klient-program. Klient-programmet kommer i detta fall vara din webbläsare.

Öppna din text-editor och skriv in koden nedan:

var http = require("http");
var port = "80";

http.createServer(httpRequest).listen(port);

function httpRequest(request, response) {
	response.writeHead(200, "OK", {'Content-Type': 'text/plain; charset=utf-8'});
	response.end("Hej!");
}

Öppna sedan din webbläsare och skriv in addressen: http://localhost/.
Du bör nu se en hemsida med texten "Hej!".

Gå sedan tillbaka till kommando-promten och avsluta server-programmet genom att trycka Ctrl+C

Du skapade just ett server-program som serverade en hemsida! Hemsidan serverades på addressen/URL localhost, som är den lokala datorns address.
Din server och webbläsaren använde HTTP-protokollet för att prata med varandra på port 80.

Var ej orolig om du inte förstår, det tog mig flera år att förstå hur detta fungerade!

Skapa en hemsida med HTML

Öppna din text-editor och skriv in koden nedan, och spara som hej.htm

Öppna filen genom att dubbelklicka på den eller skriv in addressen i webbläsaren: (file://sökvägen/till/filen), eller dra filen till webbläsar-fönstret.

Skapa en dynamisk hemsida

Öppna din text-editor och skriv in koden nedan, och spara som dynamisk.htm

Öppna filen i webbläsaren och klicka på knappen! Då ändras texten "enkla" till "SNYGGA".

Du har nu gjort en så kallad dynamisk, eller interaktiv hemsida, med skriptade event.

Skapa en hemsida med CSS

För att styla-till hemsidor använder man stil-mallar (CSS). Öppna din text-editor och skriv in koden nedan, och spara som stilig.htm

CSS används för att placera och styla till innehållet på hemsidan!

Visa hemsidans källkod

Högerklicka med musen och välj "Visa källkod" eller tryck Ctrl+U på tangentbordet. (Jag antar att du använder webbläsaren Opera)

Du kan göra detta på vilken hemsida som helst! Prova att göra det på denna!
På så sätt kan du lära dig genom att kolla hur andra har gjort.

Öppna hemsidans utvecklingsverktyg

Högerklicka med musen och välj Inspektera element, eller tryck Ctrl-shift+C på tangentbordet.

Det viktigaste är fliken "Konsoll" (längst till höger) som visar eventuella fel-meddelanden eller meddelande från console.log

Övningsuppgift

1. Installera programmerings-språket Python (v 2.x.x)
2. Skapa ett så kallat "Hello World" program i python-kod.
3. Kör python-programmet genom att skriva python med filens (sökväg) namn som argument i kommando-tolken.

print("hej");

Summering, del 1 av programmerings-kursen

Du har nu några kod-exempel att leka med. Du är troligvis totalt förvirrand just nu, men det viktagaste är att du har kommit igång!
Detaljerna kommer falla på plats ju mer du leker och utforskar.

Skrivet av Johan Zetterberg, 1:a December 2015